<template>
  <h4>{{ title }}</h4>
  <canvas :id="key" class="c2d" width="1000" height="500"></canvas>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";

const key = ref("c2d" + Math.floor(Math.random() * 10000));
const props = defineProps({
  title: String,
});

onMounted(() => {
  const canvas = document.querySelector(`#${key.value}`);
  // 渲染器
  const renderer = new THREE.WebGLRenderer({ canvas });

  const fov = 40; // 视野范围
  const aspect = 2; // 相机默认值 画布的宽高比
  const near = 0.1; // 近平面
  const far = 10000; // 远平面

  // 透视投影相机
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  // 设置相机 x、y、z 位置
  camera.position.set(1000, 500, 1500);
  // 相机指向的场景中心
  camera.lookAt(0, 0, 0);
  // 控制相机
  const controls = new OrbitControls(camera, canvas);
  controls.update();
  // 场景
  const scene = new THREE.Scene();
  // 背景
  scene.background = new THREE.Color(0x87ceeb);
  // 雾
  scene.fog = new THREE.Fog(0x87ceeb, 200, 10000);
  // 辅助
  const axes = new THREE.AxisHelper(700);
  scene.add(axes);

  {
    // 灯光
    const skyColor = 0xffffff; // 天空 白色
    const groundColor = 0x000000; // 地面 黑色
    const intensity = 1;
    const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
    scene.add(light);
  }

  {
    // 地面
    const loader = new THREE.TextureLoader();
    const texture = loader.load("src/assets/file/23/1.jpg");
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.magFilter = THREE.NearestFilter;
    // 纹理 重复
    texture.repeat.set(100, 100);

    const planeGeo = new THREE.PlaneGeometry(10000, 10000);
    const planeMat = new THREE.MeshPhongMaterial({
      map: texture,
      side: THREE.DoubleSide,
    });
    const mesh = new THREE.Mesh(planeGeo, planeMat);
    mesh.rotation.x = Math.PI * -0.5;
    scene.add(mesh);
  }

  let actions = []; // 所有的动画数组
  let gui = {}; // 动画控制
  let mixer = null; // AnimationMixer 对象
  const loader = new FBXLoader();
  loader.load("src/assets/file/Naruto.fbx", function (mesh) {
    console.log(
      " AnimationMixer 动画混合器（二十四）.html ~ line 73 ~ mesh",
      mesh
    );
    mesh.position.y = 110;
    scene.add(mesh);

    mixer = new THREE.AnimationMixer(mesh);
    for (var i = 0; i < mesh.animations.length; i++) {
      actions[i] = mixer.clipAction(mesh.animations[i]);
    }
    gui["action"] = function (s) {
      for (var j = 0; j < actions.length; j++) {
        if (j === s) {
          actions[j].play();
        } else {
          actions[j].stop();
        }
      }
    };
    // 第24个动作是鸣人站立的动作
    gui["action"](24);
  });

  let keyNum = 24; // 动作
  document.onkeydown = function (e) {
    if (e && e.keyCode == 32) {
      if (keyNum === 27) {
        keyNum = 1;
      }
      keyNum += 1;
      gui["action"](keyNum);
    }
  };

  const clock = new THREE.Clock();
  // 渲染
  function render() {
    const time = clock.getDelta();
    if (mixer) {
      mixer.update(time);
    }

    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
});
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
